/**
 * @FileName: GroupedSortBar.js
 * @Version: 0.0.1
 * @Author: wuzhibo
 * @Date: 2017.09.20
 * @Description: 分组排序条组件
 *
 * 属性：
 *   height - 组件高度，默认为40
 *   data - 组件数据，数组，示例：[{ name: '', items: [{ text: 'a', value: 0 }, { text: 'b', value: 1 }] }, ...]
 *
 */

//导入组件依赖
import React, { Component } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default class GroupedSortBar extends Component{

    static defaultProps = {
        data: [],
        height: 40,
        selectedGroupIndex: 0,
        selectedGroupItemIndex: 0,
        onPress: function () {}
    }

    constructor(props) {
        super(props);
        this.state = {
            selectedGroupIndex: this.props.selectedGroupIndex,
            selectedGroupItemIndex: this.props.selectedGroupItemIndex
        };
    }

    _onItemPress(item, itemIndex, group, groupIndex){
        this.setState({selectedGroupItemIndex: itemIndex, selectedGroupIndex: groupIndex});
        this.props.onPress(item, group);
    }

    _renderGroupItems(items){
        var self = this;
        return items.map(function(item, index){
            return (
                <TouchableOpacity style={styles.groupItem} onPress={()=>self._onItemPress(item, index)}>
                    <Text>{item.text}</Text>
                </TouchableOpacity>
            )
        });
    }

    _renderGroups(){
        var t = this;
        return this.props.data.map(function(group, index){
            var selected = index === t.state.selectedGroupIndex;
            return (
                <TouchableOpacity key={index}
                                  style={styles.itemContainer}
                                  onPress={()=>t.setState({selectedGroupIndex: index})}>
                    <View style={styles.textContainer}>
                        <Text style={[styles.textStyle, selected ? styles.selectedTextStyle : undefined]}>{group.items[t.state.selectedGroupItemIndex].text}</Text>
                    </View>
                    <View style={styles.iconContainer}>
                        <FontAwesome name={selected ? 'caret-down' : 'caret-left'} size={16} color={selected ? '#f49826' : '#ccc'} style={{marginRight: 10}}/>
                    </View>

                    <View style={[styles.dropItemContainer, {top: t.props.height}]}>
                        { t._renderGroupItems(group.items) }
                    </View>
                </TouchableOpacity>
            )
        });
    }

    render() {
        return (
            <View style={[styles.container, {
                height: this.props.height
            }]}>
                { this._renderGroups() }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flex: 1,
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderColor: '#ddd'
    },
    itemContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
    },
    textContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textStyle: {
        color: '#333'
    },
    selectedTextStyle: {
        color: '#f49826'
    },
    iconContainer: {
        width: 20,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    dropItemContainer: {
        position: 'absolute',
        width: '100%'
    },
    groupItem: {
        flex: 1,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center'
    }
});